import { throttle } from "./tool";
export const remBase = 14; //14px 最小font-size
// rem 适配原理 是 动态改变html根元素的font-size
let htmlFontSize;

!(function () {
  // 适配函数
  const calc = function () {
    // 获取根元素

    const html = document.getElementsByTagName("html")[0];
    // 获取根元素宽度
    const width = html.clientWidth;
    let size = remBase * (width / 1440);
    console.log(size);
    size = Math.min(18, size);
    size = Math.max(14, size);
    // font-size  适配 14-18
    html.style.fontSize = size + "px";
  };
  calc(); //默认调用适配函数
  // 页面尺寸改变  重新适配
  // 对页面改变事件函数 节流
  window.addEventListener("resize", throttle(calc, 500));
})();

// 根据基准字号计算
// 用于静态样式
export function toRem(px) {
  return `${px / remBase}rem`;
}

// 根据当前的html根字体大小计算
// 用于某些js的动态计算
export function toCurrentRem(px) {
  return `${px / htmlFontSize}rem`;
}
